<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

//准备一个路由对象
const router = useRouter();


//准备一个和校验项一致的双向绑定数据
const form = ref({
  account: '',
  password: '',
  code: '',
  agree: false,
})

//准备一个校验规则
const rules = {
  //每一个表单项对应一个数组，数组内可以定义多个对象
  account: [
    { required: true, message: '账号不能为空', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 3, max: 14, message: '密码不能小于3位或大于14位', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '验证码不能为空', trigger: 'blur' },
  ],
  agree: [
    {
      //rule是规则，value是当前的值，callback是当值变化时会调用的一个方法
      validator: (rule, value, callback) => {
        value === false ? callback(new Error('请同意用户协议')) : callback()
      },
    }
  ],
}


</script>

<template>

  <div class="title">
    <router-link to="/login/forgetPassword">
      <svg-icon name="zuojiantou"></svg-icon>
    </router-link>
    <h2>身份验证</h2>
  </div>

  <div class="form">
    <!-- :model 是elementUI的一个属性，把响应式数据form和这个表单关联在一起, :rules 是elementUI的一个属性，把这个from和一个规则对象绑定在一起-->
    <el-form :model="form" :rules="rules" ref="formEl" label-position="right" label-width="60px" status-icon>

      <!-- 手机号 -->
      <el-form-item prop="phone" label="手机号">
        <el-input v-model="form.phone" placeholder="请输入手机号" size="large" />
        <div class="codeBtn">
          <button>获取验证码</button>
        </div>
      </el-form-item>


      <el-button size="large" class="subBtn" @click="router.push('/login/resetPassword')">下一步</el-button>
    </el-form>

  </div>



</template>

<style lang='scss' scoped>
.title {
  font-size: 2rem;
  display: flex;
  align-items: center;
  margin-bottom: 30px;

  & h2 {
    margin: 0 auto;
  }
}


.form {

  .subBtn {
    margin-top: 20px;
    width: calc(100% - 20px);
    margin-left: 20px;
    background-color: rgb(255, 98, 0);
    color: white;
  }

  .codeBtn {
    position: absolute;
    right: 10px;
    background-color: white;

    & button {
      color: rgb(255, 98, 0)
    }
  }







  @media screen and (min-width: 768px) {
    .login-box {
      border-radius: 15px;
      height: 60vh;
      width: 50rem;
      margin: 15vh auto;


    }
  }

  @media screen and (max-width: 767px) {
    .login-box {
      height: 100vh;
      width: 100vw;
      // margin: 15vh auto;
      background-color: rgba(255, 255, 255, 1);
    }
  }


}
</style>
